<script setup lang="ts">
import { ref } from "@vue/reactivity";
import {useRouter} from "vue-router"
const router = useRouter()
interface noteCardType {
    noteId:string,
    imgUrl: string,
    imgText: string
}
let noteCardData = ref<noteCardType[]>(
    [
        {
            noteId:'1001',
            imgUrl: 'https://img.1ppt.com/uploads/allimg/2101/1_210113133659_1.JPG',
            imgText: '第一篇文章撒开的喀斯柯达开卡时看到快卡死卡'
        },
        {
            noteId:'10002',
            imgUrl: 'https://img.1ppt.com/uploads/allimg/2101/1_210113133659_1.JPG',
            imgText: '第一篇文章'
        }
    ]
)
const toPublish = () => {
    router.push({name:'publish'})
}
</script>

<template>
    <div :class="noteCardData.length < 2 ? 'sliderContainer flexaible' : 'sliderContainer'">
        <div class="submitNote">
            <div class="submit-desc1" @click="toPublish"><span class="iconfont icon-bi"></span> 制作小记</div>
            <div class="submit-desc2">记录你的想法</div>
        </div>
        <div class="note-card-item" v-for="(item, index) in noteCardData" :key="index">
            <div>
                <img :src="item.imgUrl" :alt="item.imgText.substring(0, 5)" />
                <div class="note-card-item-name">{{ item.imgText }}</div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.flexaible {
    display: flex;
    justify-content: space-around;
}
.sliderContainer {
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    .submitNote {
        margin: 10px;
        float: left;
        width: 120px;
        height: 80px;
        border: 1px dashed #999999;
        color: #555;
        border-radius: 10px;
        text-align: center;
        .submit-desc1 {
            margin-top: 15px;
        }
        .submit-desc2 {
            color: #999;
            margin-top: 5px;
            font-size: 13px;
        }
    }
    .note-card-item {
        margin: 10px;
        border-radius: 10px;
        display: inline-block;
        width: 120px;
        height: 80px;
        border: 1px solid #999;
        img {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            width: 100%;
            height: 50px;
        }
        .note-card-item-name {
            margin-top: 5px;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
}
.sliderContainer::-webkit-scrollbar {
    display: none;
}
</style>